<template>
    <Modal v-model="show" title="增加" @on-ok="ok" :loading="loading">
        <Form ref="editDictForm" :model="editDictForm" :rules="editDictFormRule" >
            <FormItem label="字典类型" prop="type">
                <Input type="text" :maxlength=10 v-model="editDictForm.type" placeholder="请输入字典类型">
                </Input>
            </FormItem>
            <FormItem label="字典描述" prop="text">
                <Input type="text" :maxlength=10 v-model="editDictForm.text" placeholder="请输入字典描述">
                </Input>
            </FormItem>
            <FormItem label="字典编码" prop="code">
                <Input type="text" :maxlength=10  v-model="editDictForm.code" placeholder="请输入字典编码">
                </Input>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
    import { isExit,getDict } from '../../api/dict';
    export default {
        name: 'editDict',
        props: {
            id: {
                type: String
            },
            value:{
                type:Boolean,
                default:false
            }
        },
        data (){
          return {
              editDictForm: {
                  type:'',
                  text: '',
                  code: ''
              },
              editDictFormRule: {
                  type:[
                      { required: true, message: '请输入字典类型', trigger: 'blur' },
                      { type: 'string', max:10, message: '字典类型允许输入最大长度为10个字符', trigger: 'blur' }
                  ],
                  text: [
                      { required: true, message: '请输入字典描述', trigger: 'blur' },
                      { type: 'string', max:10, message: '字典描述允许输入最大长度为10个字符', trigger: 'blur' }
                  ],
                  code: [
                      { required: true, message: '请输入字典编码.', trigger: 'blur' },
                      { type: 'string', max:10, message: '字典编码允许输入最大长度为10个字符', trigger: 'blur' },
                      { validator: this.checkDict({
                              url:"/dict/exit",
                              tip:'字典编码重复',
                              response:'exist'
                          }), trigger: 'blur'}
                  ]
              },
              show : this.value,
              loading: true
          }
        },
        watch: {
            value(val){
                this.show = val;
            },
            show(val){
                if(val){
                    this.getDictById();
                }
                this.closeModal(val);
            }
        },
        methods: {
            getDictById(){
                // 重置整个表单的验证
                this.$refs['editDictForm'].resetFields();
                let id = this.id;
                getDict({id}).then(res=>{
                    this.editDictForm = res.dict;
                });
            },
            checkDict(json){
                let _this = this;
                return function (rule, value, callback) {
                    let type = _this.editDictForm.type;
                    let code = value;
                    isExit({type,code}).then(res => {
                        if(res.success){
                            callback();
                        }else{
                            callback(new Error(json.tip ? json.tip : '名称重复'));
                        }
                    });
                }
            },
            ok(){
                this.$refs['editDictForm'].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                        this.closeModal(false);
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
                console.log(JSON.stringify(this.editDictForm))
                this.loading = false;
                this.$nextTick(() => {
                    this.loading = true;
                });
            },
            closeModal(val){
                this.$emit('input', val);
            }
        }
    }
</script>